import { Modal, Button, Form, Input, } from 'antd';
import React, { useEffect, FC } from 'react';
import { render } from 'react-dom';

import { oneDataItemType, FormValus } from '../my.d'
interface MyModalProps {
  visible: boolean,
  record: oneDataItemType | undefined,
  onFinish: (values: FormValus) => void, // 声明函数 没有返回值
  handleCancel: () => void,
}


const Index: FC<MyModalProps> = (props) => {
  const { record, visible, onFinish, handleCancel } = props;
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
  const [form] = Form.useForm();

  useEffect( //有2个参数  这个应该是一个异步的函数 hooks
    () => {
      console.log('hooks effect: ', record);
      if (record) {
        form.setFieldsValue(record); //编辑的时候赋值
      } else {
        form.resetFields();//新增的时候清空
      }
    }
    ,
    [visible] //这里是一个触发条件 可以接受多个参数
  )



  const onOK = () => {
    form.submit() // 对话框确定后 调用表单提交
  }

  const onFinishFailed = (errorInfo: any) => { //表单提交失败
    console.log('Failed:', errorInfo);
  };


  return (
    <Modal
      title="Basic Modal"
      visible={visible}
      onOk={onOK}
      onCancel={handleCancel}
      forceRender //! 这个东西在Form最里面找的 一定要在Model+这个配置 -> 这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染。
    >
      <Form
        {...layout}
        name="basic"
        //   initialValues={{ name:'张飞' }} //表单默认值 只有初始化以及重置时生效 这里传一个对象 传什么表单就会显示什么 注意 用不到
        onFinish={onFinish} //提交成功
        onFinishFailed={onFinishFailed} //提交失败
        {...layout}
        form={form}  // ! 这个一定要+ 配合 setFieldsValue
      >
        <Form.Item
          label="名字"
          name="name"

          rules={[{ required: true, message: 'Please input your name!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, message: 'Please input your name!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="创建时间"
          name="create_time"
          rules={[{ required: true, message: 'Please input your name!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="状态"
          name="status"
          rules={[{ required: true, message: 'Please input your name!' }]}
        >
          <Input />
        </Form.Item>

      </Form>
    </Modal>
  )
}

export default Index